<template>
  <view>
    <tui-skeleton v-if="skeletonShow"></tui-skeleton>
    <view class="page-index tui-skeleton">
      <Header />
      <view class="page_content">
        <uni-swiper-dot
          class=""
          :info="bastBanner"
          :current="current"
          field="content"
          :mode="mode"
        >
          <swiper class="swiper-box" @change="bannerChange">
            <swiper-item v-for="(item, index) in bastBanner" :key="index">
              <view class="swiper-item">
                <image class="banner-img" :src="item.pic" mode="widthFix"></image>
              </view>
            </swiper-item>
          </swiper>
        </uni-swiper-dot>
        <view class="row">
          <view class="title">
            {{ $t(`page.index.popularShop`) }}
          </view>
          <view class="shop-swiper">
            <swiper
              class="swiper-box"
              :indicator-dots="true"
              :autoplay="true"
              circular="true"
              interval="2500"
              duration="500"
            >
              <swiper-item
                class="swiper-item"
                v-for="(item, index) in popularList"
                :key="index"
              >
                <view class="img-list">
                  <view
                    class="img-item"
                    v-for="(v, ind) in item.children"
                    :key="ind"
                    @click="goToStore(v)"
                  >
                    <image
                      class="img-url"
                      :src="v.backImage || '../../static/img/header.jpg'"
                      mode="heightFix"
                    ></image>
                    <view class="img-name">
                      {{ v.name }}
                    </view>
                  </view>
                </view>
              </swiper-item>
            </swiper>
          </view>
        </view>
        <view class="row">
          <view class="title" v-if="locale === 'zh'">
            {{ $t(`page.index.theMasses`) }}
          </view>
          <view class="title" v-else>
            <view class="title-top">
              {{ $t(`page.index.crowd`) }}
            </view>
            <view class="title-bottom">
              {{ $t(`page.index.classify`) }}
            </view>
          </view>
          <view class="goods-list">
            <view class="goods-item" v-for="(item, index) in crowdList" :key="index">
              <image
                class="goods-img"
                :src="item.backImage || '../../static/img/header.jpg'"
                mode="widthFix"
                @click="goToStore(item)"
              ></image>
            </view>
          </view>
        </view>
        <view class="row big-row">
          <view class="shop-title">
            {{ firstStore.name }}
          </view>
          <view class="shop-desc">
            {{ firstStore.intro }}
          </view>
          <button class="btn" @click="goToStore(firstStore)">
            {{ $t(`page.index.allProduct`) }}
          </button>
          <view class="shop-goods-list">
            <view
              class="shop-goods-item"
              v-for="(item, index) in firstStore.proList"
              :key="index"
              @click="goDetail(item)"
            >
              <view class="shop-goods-img">
                <image class="img" :src="item.image" mode="heightFix"></image>
              </view>
              <view class="name">
                {{ item.storeName }}
              </view>
             <view class="star">
               <myIssue :score="item.score" :starsDisabled="true" />
             </view>
              <view class="shop-footer">
                <view class="price">
                  ${{ item.price }}
                </view>
				<text class="num" >{{item.sales>1000?'1000+':item.sales}} {{$t(`message.tips.sold`)}}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="tips">
          <image class="icon" src="@/static/img/car.svg" mode=""></image>
          <text>{{ $t(`page.index.tips`) }}</text>
        </view>
        <view class="row big-row">
          <view class="shop-title">
            {{ secondStore.name }}
          </view>
          <view class="shop-desc">
            {{ secondStore.intro }}
          </view>
          <button class="btn" @click="goToStore(secondStore)">
            {{ $t(`page.index.allProduct`) }}
          </button>
          <view class="shop-goods-list">
            <view
              class="shop-goods-item"
              v-for="(item, index) in secondStore.proList"
              :key="index"
              @click="goDetail(item)"
            >
              <view class="shop-goods-img">
                <image class="img" :src="item.image" mode="heightFix"></image>
              </view>
              <view class="name">
                {{ item.storeName }}
              </view>
				 <view class="star">
				   <myIssue :score="item.score" :starsDisabled="true" />
				 </view>
              <view class="shop-footer">
                <view class="price">
                  ${{ item.price }}
                </view>
				<text class="num" >{{item.sales>1000?'1000+':item.sales}} {{$t(`message.tips.sold`)}}</text>
                <!-- <view class="shop-footer-right">
									<i class="iconfont icon-gouwuche"></i>
									<i class="iconfont icon-xihuan"></i>
								</view> -->
              </view>
            </view>
          </view>
        </view>
        <view class="row big-row">
          <view class="shop-title">
            <!-- {{$t(`page.index.theBage`)}} -->
            {{ thirdStore.name }}
          </view>
          <view class="shop-desc">
            {{ thirdStore.intro }}
          </view>
          <button class="btn" @click="goToStore(thirdStore)">
            {{ $t(`page.index.allProduct`) }}
          </button>
          <view class="shop-goods-list">
            <view
              class="shop-goods-item"
              v-for="(item, index) in thirdStore.proList"
              :key="index"
              @click="goDetail(item)"
            >
              <view class="shop-goods-img">
                <image class="img" :src="item.image" mode="heightFix"></image>
              </view>
              <view class="name">
                {{ item.storeName }}
              </view>
              <view class="star">
                <myIssue :score="item.score" :starsDisabled="true" />
              </view>
              <view class="shop-footer">
                <view class="price">
                  ${{ item.price }}
                </view>
				<text class="num" >{{item.sales>1000?'1000+':item.sales}} {{$t(`message.tips.sold`)}}</text>
                <!-- <view class="shop-footer-right">
									<i class="iconfont icon-gouwuche"></i>
									<i class="iconfont icon-xihuan"></i>
								</view> -->
              </view>
            </view>
          </view>
        </view>
        <view class="row big-row">
          <view class="shop-title">
            {{ $t(`page.index.recommendProduct`) }}
          </view>
          <view class="shop-goods-list">
            <view
              class="shop-goods-item"
              v-for="(item, index) in productList"
              :key="index"
              @click="goDetail(item)"
            >
              <view class="shop-goods-img">
                <image class="img" :src="item.image" mode="heightFix"></image>
              </view>
              <view class="name">
                {{ item.storeName }}
              </view>
              <view class="star">
                <myIssue :score="item.score" :starsDisabled="true" />
              </view>
              <view class="shop-footer">
                <view class="price">
                  ${{ item.price }}
                </view>
				<text class="num" >{{item.sales>1000?'1000+':item.sales}} {{$t(`message.tips.sold`)}}</text>
                <!-- <view class="shop-footer-right">
									<i class="iconfont icon-gouwuche"></i>
									<i class="iconfont icon-xihuan"></i>
								</view> -->
              </view>
            </view>
          </view>
        </view>
        <view class="version-info"> © 2021-2025, Your Store, All Rights Reserved </view>
      </view>
    </view>
    <tui-drawer mode="right" :visible="rightDrawer" @close="closeDrawer">
      <user-drawer @close="closeDrawer"></user-drawer>
    </tui-drawer>
  </view>
</template>
<script>
import coupons from "./components/coupons.vue";
import recommended from "./components/recommended.vue";
import goodsRank from "./components/goodsRank";
import swiperItem from "./components/swiperItem.vue";
import promotions from "./components/promotions.vue";
import firstNew from "./components/firstNew.vue";
import categories from "./components/categories.vue";
import indexShop from "./components/shop.vue";
import Header from "@/components/Header/Header.vue";
import WaterfallsFlow from "@/components/WaterfallsFlow/WaterfallsFlow.vue";
import { getGroomList, getActivityindexList, getProductslist } from "@/api/store.js";
import { getIndexData, setCouponReceive, getMerchantType } from "@/api/api.js";
import Cache from "@/utils/cache.js";
import { mapGetters } from "vuex";
import { goShopDetail } from "@/libs/order.js";
import myIssue from "@/uni_modules/stars/components/myIssue.vue";
import {
  collectAdd,
  collectDel,
  postCartAdd,
  // getReplyConfig,
  // getProductGood,
  // getReplyProduct
} from "@/api/store.js";
import { getMerSearchApi } from "@/api/merchant.js";
import { getMerProListApi } from "@/api/merchant.js";
export default {
  data() {
    return {
      skeletonShow: true,
      params: {
        //精品推荐分页
        page: 1,
        limit: 10,
      },
      goodScroll: true,
      loaded: false,
      loading: false,
      iSshowH: false,
      imgUrls: [],
      menuList: [],
      tempArr: [],
	  productList: [],
      bastBanner: [],
      rightDrawer: false,
      activityindexList: [],
      categoryList: [],
      rankingList: [],
      indexBannerType: "1",
      current: 0,
      mode: "round",
      locale: "",
      whereMer: {
        categoryId: "",
        isSelf: "",
        keywords: "",
        page: 1,
        limit: 18,
        typeId: "",
      },
      merchantList: [],
      firstStore: {
        goodsList: [],
      },
      secondStore: {
        goodsList: [],
      },
      thirdStore: {
        goodsList: [],
      },
      where: {
        keyword: "",
        priceOrder: "",
        salesOrder: "",
        news: 0,
        page: 1,
        limit: 20,
        cid: 0,
        merId: null,
      },
      price: 0,
      loadTitle: "",
      popularList: [],
      crowdList: [],
    };
  },
  computed: mapGetters(["merchantClassify", "merchantType"]),
  components: {
    WaterfallsFlow,
    coupons,
    recommended,
    goodsRank,
    swiperItem,
    promotions,
    firstNew,
    categories,
    indexShop,
    Header,
    myIssue,
  },
  // 滚动监听
  onPageScroll(e) {
    // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
    uni.$emit("scroll");
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: this.$t(`page.store.merInfo`),
    });
    // let locale = (navigator.language || navigator.browserLanguage).toLowerCase();
    // uni.setStorageSync('locale', locale);
    uni.setNavigationBarTitle({
      title: this.$t(`userDrawer.data[0].name`),
    });
    this.getIndexConfig();
    this.getActivityindex();
    this.getMerStreet();
    // 商铺数据
    this.getMerchantList("POPULAR").then((data) => {
      this.popularList = this.initData(data.reverse());
    });
    this.getMerchantList("CROWD").then((data) => {
      this.$set(this, "firstStore", data[4]);
      this.$set(this, "secondStore", data[5]);
      this.$set(this, "thirdStore", data[6]);
      this.crowdList = data.splice(0, 4);
    });
	this.getProductList();
  },
  mounted() {
    this.locale = uni.getStorageSync("locale");
  },
  methods: {
    initData(list) {
      const arr = [];
      const len = parseInt(list.length / 6);
      for (let i = 0; i < len; i++) {
        let obj = {
          children: list.splice(0, 6),
        };
        arr.push(obj);
      }
      return arr;
    },
    bannerChange(e) {
      this.current = e.detail.current;
    },
    // 去详情页
    godDetail(item) {
      goShopDetail(item);
    },
    getActivityindex() {
      getActivityindexList()
        .then((res) => {
          this.activityindexList = res.data;
        })
        .catch((res) => {
          return this.$util.Tips({
            title: res,
          });
        });
    },
    open() {
      this.rightDrawer = true;
    },
    closeDrawer(e) {
      this.rightDrawer = false;
      if (!e) {
        this.rightDrawer = false;
      }
    },
    search() {
      uni.navigateTo({
        url: "/pages/goods_search/index",
      });
    },
    menusTap(url) {
      uni.navigateTo({
        url,
      });
    },
    getMerchantList(type) {
      const that = this;
      return new Promise((resolve, reject) => {
        getMerchantType(type)
          .then((res) => {
            let data = res.data.list;
            if (data.length > 0) {
              resolve(data);
            } else {
              console.log("【错误】", res);
              reject(false);
            }
          })
          .catch((err) => {
            reject(err);
          });
      });
    },
    // 首页数据
    getIndexConfig: function () {
      let that = this;
      getIndexData()
        .then((res) => {
          // console.log('【首页数据】', res.data);
          that.$set(that, "imgUrls", res.data.banner);
          that.$set(that, "menuList", res.data.menus); //bastBanner
          that.$set(that, "bastBanner", res.data.bastBanner); //bastBanner
          that.$set(that, "categoryList", res.data.categoryList); //categoryList
          that.$set(that, "rankingList", res.data.ranking);
          that.$set(that, "indexBannerType", res.data.indexBannerType);
          // 保存商品分类页配置
          that.$Cache.setItem({
            name: "categoryConfig",
            value: {
              categoryConfig: res.data.categoryPageConfig,
              isShowCategory: res.data.isShowCategory,
            },
          });
          that.$store.commit("SET_CHATURL", res.data.consumerH5Url);
          Cache.setItem({
            name: "merPlatChatConfig",
            value: {
              consumerHotline: res.data.consumerHotline, //客服电话
              consumerH5Url:res.data.consumerH5Url, //云智服
              consumerMessage: res.data.consumerMessage, //基于facebook的message消息
              consumerEmail: res.data.consumerEmail, //客服邮箱
              consumerType: res.data.consumerType, //客服类型四选一
            },
          });
          this.skeletonShow = false;
          this.getGroomList();
        })
        .catch((err) => {
          this.skeletonShow = false;
          return this.$util.Tips({
            title: err,
          });
        });
    },
    // 精品推荐
    getGroomList(onloadH) {
      this.loading = true;
      // let type = this.goodType;
      // if (!this.goodScroll) return
      // if (onloadH) {
      // 	this.iSshowH = true
      // }
      getGroomList(this.params).then(({ data }) => {
        // this.iSshowH = false
        // this.loading = false
        // this.goodScroll = data.list.length >= this.params.limit
        // this.params.page++
        // this.tempArr = this.tempArr.concat(data.list);
        this.tempArr = data.list;
      });
    },
    goDetail(item) {
      uni.navigateTo({
        url: `/pages/goods_details/index?id=${item.id}`,
      });
    },
    /**
     *
     *
     * 收藏商品
     */
    setCollect: function () {
      let that = this;
      if (this.isLogin === false) {
        toLogin();
      } else {
        if (this.userCollect) {
          collectDel(this.productInfo.id).then((res) => {
            that.$set(that, "userCollect", !that.userCollect);
          });
        } else {
          collectAdd(this.productInfo.id).then((res) => {
            that.$set(that, "userCollect", !that.userCollect);
          });
        }
      }
    },
    // 商店
    goToStore(item) {
      uni.navigateTo({
        url: "/pages/merchant/home/index?id=" + item.id,
      });
    },
    getMerStreet: function (isPage) {
      let that = this;
      that.setWhere();
      if (that.loadend) return;
      if (that.loading) return;
      that.loading = true;
      if (isPage === true) that.$set(that, "merchantList", []);

      that.loadTitle = "";
      getMerSearchApi(that.whereMer)
        .then((res) => {
          let list = res.data.list.reverse();
          let merchantList = that.$util.SplitArray(list, that.merchantList);
          let loadend = list.length < that.whereMer.limit;
          that.loadend = loadend;
          that.loadTitle = loadend
            ? this.$t("page.goodsList.no")
            : this.$t("page.goodsList.more");
          that.$set(that, "merchantList", merchantList);

          that.$set(that.whereMer, "page", that.whereMer.page + 1);
          that.loading = false;
          // that.getGoods(merchantList[0].id).then(data=>{
          // 	merchantList[0].goodsList = data.slice(0, 2);
          // 	that.$set(that, 'firstStore', merchantList[0]);
          // });
          // that.getGoods(merchantList[1].id).then(data=>{
          // 	merchantList[1].goodsList = data.slice(0, 2);
          // 	that.$set(that, 'secondStore', merchantList[1]);
          // });
          // that.getGoods(merchantList[2].id).then(data=>{
          // 	merchantList[2].goodsList = data.slice(0, 2);
          // 	that.$set(that, 'thirdStore', merchantList[2]);
          // });
        })
        .catch((err) => {
          that.loading = false;
          that.goodScroll = false;
          that.loadTitle = this.$t(`page.goodsList.more`);
        });
    },
    //设置where条件
    setWhere: function () {
      if (this.price == 0) this.where.priceOrder = "";
      else if (this.price == 1) this.where.priceOrder = "asc";
      else if (this.price == 2) this.where.priceOrder = "desc";
      if (this.stock == 0) this.where.salesOrder = "";
      else if (this.stock == 1) this.where.salesOrder = "asc";
      else if (this.stock == 2) this.where.salesOrder = "desc";
      this.where.news = this.nows === 4 ? 1 : 0;
    },
    getGoods(id) {
      let that = this;
      this.where.merId = id;
      if (this.price == 0) this.where.priceOrder = "";
      else if (this.price == 1) this.where.priceOrder = "asc";
      else if (this.price == 2) this.where.priceOrder = "desc";
      if (this.stock == 0) this.where.salesOrder = "";
      else if (this.stock == 1) this.where.salesOrder = "asc";
      else if (this.stock == 2) this.where.salesOrder = "desc";
      return new Promise((resolve, reject) => {
        getMerProListApi(that.where)
          .then((res) => {
            let list = res.data.list;
            resolve(list);
          })
          .catch((err) => {
            that.goodsLoading = false;
            uni.showToast({
              title: err,
              icon: "none",
            });
            resolve([]);
          });
      });
    },
	getProductList: function() {
		let that = this;
		// if (that.loadend) return;
		// if (that.loading) return;
		// that.loading = true;
		// that.loadTitle = '';
		getProductslist({
			page: 1,
			limit: 60,
			// cid: that.where.cid
		}).then(res => {
			let list = res.data.list;
			that.productList = list;
			// console.log('【获取商品列表】', res);
			that.$set(that, 'productList', that.productList);
		}).catch(err => {
			console.log('【商品列表】', err);
		});
	},
  },
  // 滚动到底部
  onReachBottom() {
    if (this.params.page != 1) {
      this.getGroomList();
    }
  },
};
</script>
<style lang="scss">
page {
  height: 100%;
  background-color: #fff;
}

.text-ccc {
  text-align: left;
  width: auto;
  margin-left: 20rpx;
}
.mp-bg {
  position: absolute;
  left: 0;
  /* #ifdef H5 */
  top: 98rpx;
  /* #endif */
  width: 100%;
  height: 304rpx;
  @include index-gradient(theme);
}
.page_content {
  background-color: #fff;
  padding-top: 230rpx;
  padding-bottom: 100rpx;
  .swiper-box {
    width: 100%;
    // height: 500rpx;
    .swiper-item {
      width: 100%;
      .banner-img {
        width: 100%;
      }
    }
    .uni-swiper__dots-item {
      border: unset !important;
    }
  }
  .swipershort {
    position: relative;
    width: 100%;
    height: 320rpx;
    margin: 0 auto;
    border-radius: 10rpx;
    overflow: hidden;
    margin-bottom: 25rpx;
    padding: 0 15px;
    /* #ifdef MP */
    z-index: 10;
    margin-top: 20rpx;

    /* #endif */
    swiper,
    .swiper-item,
    image {
      width: 100%;
      height: 320rpx;
      border-radius: 10rpx;
    }
  }
  .swiperlone {
    width: 100%;
    swiper,
    .swiper-item {
      height: 750rpx;
    }
    .slide-image,
    /deep/.easy-loadimage > uni-image > div,
    uni-image > img,
    /deep/.easy-loadimage > uni-image {
      width: 100%;
      height: 750rpx;
      overflow: initial !important;
    }
  }
  .row {
    padding: 0 30rpx;
    background-color: #fff;
    .title {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      text-align: center;
      padding: 40rpx;
      width: 100%;
      font-size: 40rpx;
      .title-top {
        width: 100%;
      }
      .title-bottom {
        width: 100%;
      }
    }
    .title::before {
      position: absolute;
      left: 100rpx;
      content: "";
      background-color: rgb(57, 57, 57);
      height: 2rpx;
      width: 80rpx;
      margin: 0 10rpx;
    }
    .title::after {
      position: absolute;
      right: 100rpx;
      content: "";
      background-color: rgb(57, 57, 57);
      height: 2rpx;
      width: 80rpx;
      margin: 0 10rpx;
    }
    .shop-title {
      position: relative;
      text-align: center;
      font-size: 80rpx;
      width: 100%;
    }
    .shop-title::after {
      position: absolute;
      bottom: -0rpx;
      left: 280rpx;
      content: "";
      background-color: rgb(236, 85, 86);
      height: 10rpx;
      width: 120rpx;
      margin: 0 10rpx;
    }
    .shop-desc {
      font-size: 40rpx;
      color: rgb(94, 97, 104);
      word-wrap: break-word;
      word-break: normal;
      margin: 50rpx 0;
      width: 100%;
    }
    .btn {
      margin: 30rpx auto 0;
      padding: 30rpx;
      width: 90%;
      background-color: rgb(14, 14, 14);
      color: #ffffff;
      text-align: center;
    }
    .shop-swiper {
      .swiper-box {
        height: 550rpx;
      }
      .swiper-item {
        padding-bottom: 100rpx;
        .img-list {
          display: flex;
          align-items: center;
          justify-content: space-around;
          flex-wrap: wrap;
          padding: 20rpx 0;
          .img-item {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            width: 31%;
            // height: 220rpx;
            margin-right: 20rpx;
            margin-bottom: 20rpx;
            border-radius: 10rpx;
            overflow: hidden;
            .img-url {
              // width: 240rpx;
			  height: 220rpx;
            }
            .img-name {
              position: absolute;
              bottom: 0;
              background-color: rgba(0, 0, 0, 0.5);
              padding: 0 10rpx;
              color: #fff;
              width: 100%;
              word-break: break-all;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1; /* 这里是超出几行省略 */
              overflow: hidden;
              text-align: center;
            }
          }
          .img-item:nth-child(3n) {
            margin-right: 0;
          }
        }
      }
    }
    .goods-list {
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-wrap: wrap;
      .goods-item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-bottom: 30rpx;
        .goods-img {
          width: 100%;
        }
      }
    }
    .shop-goods-list {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      margin-top: 50rpx;
      .shop-goods-item {
        width: 48%;
        margin-right: 4%;
		margin-bottom: 20rpx;
		padding: 30rpx;
        .shop-goods-img {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          .img {
            height: 300rpx;
          }
        }
        .name {
          width: 100%;
          font-size: 30rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-all;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }
        .star {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: flex-start;
		  .num{
			  margin-top: 10rpx;
		  }
        }
        .shop-footer {
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
		  flex-wrap: wrap;
          margin-top: 30rpx;
          .price {
			   color: #FD502F;
			   font-size: 40rpx;
			   font-weight: 900;
          }
		  .num {
			  font-size: 28rpx;
			  color: #888888;
			  padding-bottom: 5rpx;
		  }
          .shop-footer-right {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-right: 10rpx;
            .iconfont {
              margin-right: 10rpx;
            }
          }
        }
      }
      .shop-goods-item:nth-child(2n) {
        margin-right: 0;
      }
    }
  }
  .big-row {
    margin: 50rpx auto;
  }
  .tips {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30rpx;
    background-color: #000;
    color: #fff;
    margin-top: 100rpx;
    margin-bottom: 100rpx;
    .icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 20rpx;
    }
  }
  .nav {
    width: 100%;
    background: linear-gradient(180deg, #f5f5f5 0%, #ffffff 100%);
    padding: 0 30rpx 0;
    box-sizing: border-box;
    .menu {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .menu_item {
        width: 156rpx;
        height: 148rpx;
        background: #ffffff;
        border-radius: 16rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 32rpx;
        .easy-loadimage,
        image,
        uni-image a {
          width: 60rpx;
          height: 60rpx;
        }
        .menu_name {
          font-size: 24prx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          padding-top: 16rpx;
        }
      }
    }
  }

  .middle_banner {
    width: 690rpx;
    height: 115rpx;
    margin: 70rpx auto 0;
    swiper,
    .swiper-item {
      height: 115rpx !important;
    }
    image {
      width: 100%;
      height: 115rpx;
    }
  }
  .waterfall {
    background: #f5f5f5;
    .waterfall_title {
      font-size: 36rpx;
      font-weight: bold;
      color: #282828;
      padding: 30rpx 0 32rpx 30rpx;
      background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
    }
    .index-product-wrapper {
      margin-bottom: 110rpx;
      &.on {
        min-height: 1500rpx;
      }
      .list-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-left: 30rpx;
        .item {
          width: 335rpx;
          margin-bottom: 22rpx;
          background-color: #fff;
          border-radius: 10rpx;
          overflow: hidden;

          image {
            width: 100%;
            height: 330rpx;
          }

          .text-info {
            padding: 10rpx 20rpx 15rpx;

            .title {
              color: #222222;
            }

            .old-price {
              margin-top: 8rpx;
              font-size: 26rpx;
              color: #aaaaaa;
              text-decoration: line-through;
              font-weight: normal !important;
              text {
                margin-right: 2px;
                font-size: 20rpx;
              }
            }

            .price {
              display: flex;
              align-items: flex-end;
              @include price-color(theme);
              font-size: 34rpx;
              font-weight: 800;
              margin-top: 0;
			  color: rgb(238, 93, 64);
              text {
                padding-bottom: 4rpx;
                font-size: 24rpx;
                font-weight: 800;
              }

              .txt {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 28rpx;
                height: 28rpx;
                margin-left: 15rpx;
                margin-bottom: 10rpx;
                border: 1px solid $theme-color;
                border-radius: 4rpx;
                font-size: 22rpx;
                font-weight: normal;
              }
            }
          }
        }

        &.on {
          display: flex;
        }
      }
    }
  }
}
.version-info {
  position: relative;
  text-align: center;
  font-size: 25rpx;
  margin-top: 50rpx;
  background-color: #aaaaaa;
  color: #333333;
  padding: 20rpx;
}
</style>
